<template>
  <div class="map-block" :style="{height:Height}">
<!--    {{editorId}}-->
<!--    <pre>{{mapInfo}}</pre>-->
    <div :style="{height:Height,width:Width}"  id="mapbox"></div>

    <div class="editor-box" v-if="!this.forbid&&isDraw">
      <Button  @click="startDraw">{{
          isEditor?'重绘':'绘制'
        }}</Button>
      <Button  @click="save" :disabled="isDisabled">保存</Button>
    </div>
    <div class="control content ">
<!--      <City class="city" @on-change="geoCode"></City>-->
      <Select placeholder="请搜索地址"  v-model="keywords" @on-change="setCenter" filterable  @on-query-change="getAddress" clearable>
        <Option v-for="item in list" :value="item.location">{{item.name}}</Option>
      </Select>
      <slot name="control" ></slot>
    </div>
    <div class="show-hl-info" v-if='JSON.stringify(hlInfo) != "{}"'>
      <ul>
        <li class="flex">
          <label>护栏名称：</label>
          {{_.get(hlInfo,'name')}}
        </li>
        <li class="flex">
          <label>所属项目：</label>
          {{_.get(hlInfo,'projectName')}}
        </li>
        <li class="flex">
          <label>所属单位：</label>
          {{_.get(hlInfo,'orgName')}}
        </li>
        <li class="flex">
          <label>安装地址：</label>
          {{_.get(hlInfo,'address')}}
        </li>
      </ul>
    </div>
    <div class="cask" v-show="isEditor"></div>
    <div class="warning" v-if="this.forbid&&isDraw">此护栏已绑定设备，请到App端修改位置！</div>
  </div>
</template>

<script>
import pointInfoBlock  from "./pointInfoBlock";
import mapDevice from './mapDevice';
import Vue from 'vue/dist/vue.esm.js';
import {address} from  "@/api/base";
import Block from "./pointInfoBlock";
import util from '@/libs/util';

export default {
  name: "autoMap",
  components: {Block},
  data(){
    return {
      maMap:null,
      isEditor:false,
      isDisabled:true,
      postions:[],//绘制的护栏路径
      list:[],//搜索获取的地址列表
      keywords:'',
      hlInfo:{}//当前护栏信息
    }
  },
  props:{
    forbid:{
      type:Boolean,
      default:false,
    },
    isDraw:{
      type:Boolean,
      default:false,
    },
    editorId:{
      type:String,
    },
    Height:{
      type:String,
      default:'100%',
    },
    Width:{
      type:String,
      default:'100%'
    },
    pointData:{
      type:Array,
      default:()=>{
        return [];
      }
    },
    mapInfo:{
      type:Array,
      default:()=>{
        return [];
      }
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.init();
      setTimeout(()=>{
        if(!this.forbid&&this.isDraw){
          this.startDraw();
        }else{
         let find=this.mapInfo.find(item=>item.id==this.editorId);
         let obj={
            gps_lng:_.get(find,'path.0.lng'),
            gps_lat:_.get(find,'path.0.lat')
          }
          this.maMap.setCenter(obj)
        }
      },1000)
    })
  },
  watch:{
    mapInfo:{
      handler:function (newdata,olddata){
        this.maMap&&this.draw();
      },
      deep:true
    },
    pointData:{
      handler:function (newdata,olddata){

        this.maMap&&this.draw();
      },
      deep:true
    }
  },
  methods:{
    async getAddress(value){
      console.log(value,'=====console====')
      let res = await address({
        key:'65b4cae45a54ddcf143eb766801cd756',
        keywords:value,
      })
      this.list=(_.get(res,'tips')||[]).filter(item=>{
        return !_.isArray(item.location)
      });
    },
    setCenter(){
      let obj={};
      if(_.isString(this.keywords)){
        obj={
          gps_lng:this.keywords.split(',')[0],
          gps_lat:this.keywords.split(',')[1],
        }
        this.maMap.setCenter(obj)
      }

    },
    draw(){
      this.maMap.drawAreaLine(this.mapInfo,(type,data)=>{
        this.hlInfo=data||{};
      });
      this.maMap.addPoint(this.pointData,async (data)=>{
        this.createInfoDom({ ...data},pointInfoBlock,mapDevice);
      },()=>{},this.isCluster);
    },
    geoCode(obj){
      this.maMap&&this.maMap.geoCode(obj.n)
    },
    init(){
      this.maMap =amapdirll('mapbox',{
        center:[106.480536,36.510469],
        DrawGridText:false,//
        DrawGridRelative:false,
        isCustom:false,
        mapStyle:util.cookies.get('theme')=='2'?'amap://styles/light':'amap://styles/dark',
      });
      this.maMap.complete(()=>{
        this.draw();
      })
    },
    //单位创建并打开窗体
    createInfoDom(item,block,parm){
      let  _self=this;
      let Content = Vue.extend({
        template: `<div class="window-pop">
                          <block title="${item.name}" @close="closeWindow" :className="className">
                              <parm  :deiveInfo="item" ></parm>
                          </block>
                         </div>`,
        name: 'DeiceDetail',
        components: {
          parm,
          block,
        },
        computed:{
          className:function (){
            return '';
          }
        },
        data(){
          return {
            item: item,
          }
        },
        methods:{
          closeWindow(){
            _self.maMap.closeWindow();
          },
        }
      });

      let component = new Content().$mount();
      this.maMap.createWindowPop(component,item,()=>{
        this.maMap.map.panBy(0,160);
      });
    },
    startDraw(){//开启绘制曲线
      this.isEditor=false;
      this.isDisabled=true;
      if(this.editorId){//编辑护栏
        this.isDisabled=false;
        this.maMap.PolylineEditor(this.editorId,(data)=>{
         console.log(data,'======data-box====')
          if(_.get(data,'type')=='end'){
            this.$emit('getDrawPath',_.get(data,'target.w.path'));
          }
        });
        return;
      }
      //新增护栏
      this.maMap&&this.maMap.draw('polyline',(position)=>{//新增护栏
        this.isDisabled=false;
        console.log(position,'我是绘制的position===')
        this.postions=position;
        this.$emit('getDrawPath',this.postions);
      });
    },
    save(){
      this.maMap.closePolylineEditor();
      // this.$emit('getDrawPath',this.postions);
      this.isDisabled=true;
    },
  }
}
</script>

<style scoped lang="less">
.map-block{
  position: relative;
}
.cask{
  position: absolute;
  left: 0;
  top:0;
  right: 0;
  bottom: 0;
  background:rgba(255,255,255,.1);
  z-index:998
}
.editor-box,.control{
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 999;
  button{
    margin-left:10px;
  }
}
.control{
  left:20px;
  right: inherit;
  display: flex;

}
.show-hl-info{
  position: absolute;
  left: 20px;
  top: 120px;
  min-width:200px;
  border:1px solid #6d7fb1;
  background: rgba(120, 151, 234, 0.42);
  color: #fff;
  padding: 10px;
  font-size: 12px;
  li{
    padding: 5px 0;
  }
}
</style>
